```jsx
import * as tagsInput from "@zag-js/tags-input"
import { useMachine, normalizeProps } from "@zag-js/react"

export function TagsInput() {
  const service = useMachine(tagsInput.machine, {
    id: "1",
    value: ["React", "Vue"],
  })

  const api = tagsInput.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      {api.value.map((value, index) => (
        <span key={index} {...api.getItemProps({ index, value })}>
          <div {...api.getItemPreviewProps({ index, value })}>
            <span>{value} </span>
            <button {...api.getItemDeleteTriggerProps({ index, value })}>
              &#x2715;
            </button>
          </div>
          <input {...api.getItemInputProps({ index, value })} />
        </span>
      ))}
      <input placeholder="Add tag..." {...api.getInputProps()} />
    </div>
  )
}
```
